<template>
</template>

<style>
body {
  margin: 0;
}
</style>

<script>
/* 0、安装并导入依赖 */
import * as THREE from 'three'
import {OrbitControls} from 'three/addons'
// 安装 npm install gsap
// 导入gsap
import gsap from 'gsap'

/* 1、创建场景 */
const scene = new THREE.Scene()

/* 2、创建相机 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 10)
scene.add(camera)

/* 3、创建物体 */
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0x66CCFF})
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)

/* 4、创建渲染器 */
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(window.devicePixelRatio)
document.body.append(renderer.domElement)

/* 5、创建控制器 */
const controls = new OrbitControls(camera, renderer.domElement)

/* 6、创建辅助器 */
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

/* 7、gsap动画 */
// 文档 https://greensock.com/docs/v3/GSAP
// to() https://greensock.com/docs/v3/GSAP/gsap.to()
// 构造函数
// 参数名    中文名
// targets  目标对象
// vars     参数对象
// vars参数名  中文名     默认值
// duration   持续时间    0.5s
// delay      延迟多少s后执行  0s
// repeat     重复执行多少次   0(-1无限循环)
// yoyo       往复运动(需要和repeat配合使用)    false
// ease       时间曲线    https://greensock.com/get-started#easing
// onStart()  开始执行回调函数
// onComplete()   执行完成回调函数

// 7.1、cube沿着x轴方向移动3单位，在5s内
// cube是Mesh继承于Object3D有属性position是对象Vector3有属性xyz
// http://localhost:8080/docs/index.html#api/zh/math/Vector3
gsap.to(cube.position, {
  // 沿着x轴方向移动3单位
  x: 3,
  // 在5s内
  duration: 5,
  // 时间曲线
  ease: 'bounce.out',
  // 开始执行回调函数
  onStart: () => {
    console.log('开始执行')
  },
  // 执行完成回调函数
  onComplete: () => {
    console.log('执行完成')
  },
})

// 7.2、沿着x轴正方向看cube，顺时针旋转一周(Math.PI是旋转180度)，在5s内
// cube是Mesh继承于Object3D有属性rotation是对象Euler有属性xyz和order
// http://localhost:8080/docs/index.html#api/zh/math/Euler
let rotateAnimate = gsap.to(cube.rotation, {
  // 顺时针旋转一周
  x: Math.PI * 2,
  // 在5s内
  duration: 5,
  // 无限循环
  repeat: -1,
  // 往复运动
  yoyo: true,
})

// 7.3、cube的x的值增加到2单位，在5s内
// cube是Mesh继承于Object3D有属性scale是对象Vector3有属性xyz
gsap.to(cube.scale, {
  // x的值增加到2单位
  x: 2,
  // 在5s内
  duration: 5,
})

/* 8、监听事件 */
// 8.1、鼠标单击，开始或暂停旋转
window.addEventListener('click', () => {
  // 判断动画是否正在播放
  if (rotateAnimate.isActive()) {
    // 暂停
    rotateAnimate.pause()
  } else {
    // 继续播放
    rotateAnimate.resume()
  }
})

// 8.2、鼠标双击，全屏和退出全屏
window.addEventListener('dblclick', () => {
  // 判断是否全屏
  if (document.fullscreenElement) {
    // 退出全屏
    document.exitFullscreen()
  } else {
    // 全屏
    document.documentElement.requestFullscreen()
  }
})

// 8.3、页面尺寸发生变化，调整画布
window.addEventListener('resize', () => {
  // 更新摄像头宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像头的投影矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 更新渲染器像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

function render() {
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

render()
</script>
